<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加商品（报损报溢）</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
	</head>
	<body>
		<div class="layui-panel laulayui-container">
			<input type="hidden" id="comaddstate">
			<input type="hidden" id="inveDescDepot">
			<div class="layui-row layui-col-space10" style="padding: 15px;">
				<!-- 查询商品列表 -->
				<div class="layui-col-md6">
					<div class="layui-row">
						<div class="layui-col-md12">
							<span>输入商品编号或名称查询：</span>
							<input type="text" class="layui-input" style="width: 260px;display: inline-block;margin-right: 10px"
								placeholder="请输入商品相关信息" id="searchCommodity"/>
							<button type="button" class="layui-btn layui-btn-radius" lay-submit lay-filter="data-addSelectedCom-btn"
									style="height: 35px;line-height: 35px">
								加入所选商品
							</button>
						</div>
						<!-- tab栏 -->
						<div class="layui-col-md12 layui-tab">
							<ul class="layui-tab-title">
								<li class="layui-this">商品清单</li>
								<li>商品列表</li>
							</ul>
							<div class="layui-tab-content">
								<!-- 商品清单 -->
								<div class="layui-tab-item layui-show">
									<table id="proBill" lay-filter="proBill"></table>
								</div>
								<!-- 商品列表 -->
								<div class="layui-tab-item layui-row-col">
									<div id="proListTree" class="layui-col-md4"
										style="border-right:1px solid #eee;height:366px;overflow:auto;"></div>
									<table id="proListInfo" class="layui-col-md8" lay-filter="proListInfo"></table>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 所选商品 -->
				<div class="layui-col-md6">
					<b class="layui-inline layui-font-16">所选商品</b>
					<table id="selectProInfo" lay-filter="selectProInfo"></table>
					<script type="text/html" id="selectProBtn">
						<div class="layui-btn-container">
							<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
							<button class="layui-btn layui-btn-sm" lay-event="confirm">确认</button>
						</div>
					</script>
				</div>
			</div>
		</div>
		<!--所选商品条数-->
		<input type="hidden" id="chooseProCount">

		<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
		<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script>
			$(function () {
                //声明一个用于保存所选商品的数组
                window.chooseBreakInfoList = [];

                layui.use(['form', 'table', 'layer','tree','element','util'], function() {
                    var $ = layui.jquery,
                        form = layui.form,
                        table = layui.table,
                        layer = layui.layer,
                        tree = layui.tree,
                        util = layui.util;

                    //将仓库编号声明为全局遍历
                    window.selectDescDepot = $("#inveDescDepot").val();

                    //保存表格实例
                    var tableList = [];
                    //保存弹出层的实例
                    var indexList = [];

                    /* ---------- 商品清单 ---------- */
                    tableList[0] = table.render({
                        elem: '#proBill'
                        ,height: 366
                        ,url: '/searchInventoryCollectInfo?inveDescDepot='+$("#inveDescDepot").val() //数据接口
                        ,page: true //开启分页
                        ,cols: [[ //表头
                            {field: 'proId', title: '商品编号', width:100, align: "center"}
                            ,{field: 'inveDescName', title: '商品名称', width:150, align: "center"}
                            ,{field: 'inveDescUnit', title: '单位', width:80, align: "center"}
                            ,{field: 'inveDescSize', title: '规格', width: 90, sort: true, align: "center"}
                            ,{field: 'inveDescInventoryNum', title: '库存', width: 90, sort: true, align: "center"}
                            ,{field: 'inveDescManufacturer', title: '生产厂商', width: 130, align: "center"}
                        ]]
                        , done: function (res, curr, count) {
                            $('.layui-table-view[lay-id="proBill"]').children('.layui-table-box').children('.layui-table-body').find('table tbody tr[data-index="0"]').click();
                        },
                        limits: [10, 15, 20, 25, 50, 100],
                        limit: 15,
                        skin: 'line'
                    });

                    /* ---------- 所选商品 ---------- */
                    tableList[3] = table.render({
                        elem: '#selectProInfo'
                        ,height: 450
                        ,data: chooseBreakInfoList
                        ,toolbar: '#selectProBtn' //操作按钮
                        ,totalRow: true //开启合计行
                        ,page: false //开启分页
                        ,cols: [[ //表头
                            {checkbox:true, width:40, fixed: 'left', align:"center"}
                            ,{field: 'inveDescName', title: '商品名称', width:120, fixed: 'left', align:"center"}
                            ,{field: 'inveDescUnit', title: '单位', width:80, sort: true, align: "center"}
                            ,{field: 'proNum', title: '数量', width: 80, sort: true, totalRow: true, align: "center"}
                            ,{field: 'inveDescBatchNum', title: '产品批号', width: 110, align: "center"}
                            ,{field: 'inveDescStartDate', title: '生产日期', width: 110, sort: true, align: "center"}
                            ,{field: 'inveDescValidityDate', title: '有效期至', width: 110, sort: true, align: "center"}
                            ,{field: 'addComment', width: 100, title: '备注', align: "center"}
                        ]],
                        limits: [10, 15, 20, 25, 50, 100],
                        limit: 15,
                        skin: 'line'
                    });

                    /* ---------- 商品列表 ---------- */
                    var loadIndex = layer.load(1, {
                        shade: [0.5,'#fff'], //0.1透明度的白色背景
                    });
                    // ① 左侧树形控件
                    $.ajax({
						url:'/showProductTypeInfo',
						success:function (data) {
                            layer.close(loadIndex);
                            var treeData = JSON.parse(data);
                            treeData[0].spread = true;
                            tree.render({
                                elem: '#proListTree',
								data: treeData,
								click:function (obj) {
									var typeName = obj.data.id;
                                    if('0000' == typeName){
                                        typeName = '';
                                    }
                                    table.reload('proListInfo',{
                                        url:'/searchInventoryCollectInfo',
                                        where:{
                                            inveDescType:typeName,
                                            inveDescDepot:$("#inveDescDepot").val()
                                        },
                                        page:{curr:1}
                                    },'data');
                                }
                            })
                        }
					});
                    // ② 右侧商品列表信息
                    tableList[1] = table.render({
                        elem: '#proListInfo'
                        ,height: 366
                        ,url:'/searchInventoryCollectInfo' //数据接口
                        ,page: false //开启or关闭分页
                        ,cols: [[ //表头
                            {field: 'proId', title: '商品编号', width:90, align: "center"}
                            ,{field: 'inveDescName', title: '商品名称', width:100, align: "center"}
                            ,{field: 'inveDescUnit', title: '单位', width:70, align: "center"}
                            ,{field: 'inveDescSize', title: '规格', width: 90, align: "center"}
                            ,{field: 'inveDescInventoryNum', title: '库存数', width: 90, sort: true, align: "center"}
                            ,{field: 'inveDescManufacturer', title: '生产商', width: 120, align: "center"}
                        ]],
                        limits: [10, 15, 20, 25, 50, 100],
                        limit: 15,
                        skin: 'line'
                    });

                    /*--------------------------------------------------- 分割线 ------------------------------------------*/

                    /* ---------- 所选商品列表添加样式 ----------*/
                    var selectProInfo;
                    table.on('row(proBill)', function(obj){
                        selectProInfo = obj.data;
                        obj.tr.addClass('layui-bg-green').siblings().removeClass('layui-bg-green');
                    });

                    /* ---------- 根据商品编号和商品名称搜索 ---------- */
                    $('#searchCommodity').keyup(function(){
                        table.reload('proBill',{
                            url:'/searchInventoryCollectInfo?inveDescDepot='+$("#inveDescDepot").val(),
                            where:{
                                proId:$(this).val(),
                                inveDescName:$(this).val()
                            },
                            page:{curr:1}
                        },'data');
                    });

                    /* ---------- 监听加入所选商品按钮 ---------- */
                    form.on('submit(data-addSelectedCom-btn)',function () {
                        //调用编辑商品的弹窗方法
                        editProduct(selectProInfo);
                    });

                    //创建一个集合用于存储选中行的下标
                    var trIndexList = [];
                    //监听表格复选框选择
					table.on('checkbox(selectProInfo)', function (obj) {
                        //获取选中行的下标(从零开始)
						var trIndex = obj.tr.attr('data-index');
                        //获取是否为全选
						var isAll = table.checkStatus('selectProInfo').isAll;

						//判断是全选则添加所有所选商品
						if(isAll){
                            trIndexList = [];
                            for(var i = 0,len = chooseBreakInfoList.length;i < len; i++){
                                trIndexList.push(i);
							}
						}else if(undefined == trIndex){
						    //判断是反选清空所有所选商品
                            trIndexList = [];
						}else{
						   // 判断复选框的选中状态，进行增加 | 删除
							if(obj.checked){
                                //添加选中的下标至数组末尾
                                trIndexList.push(trIndex);
							}else {
                                //从数组中删除取消的一个元素
								trIndexList.splice($.inArray(trIndex,trIndexList),1);
							}
						}
                    });

                    /* ---------- 所选商品(删除 | 确认)【监听头部工具栏事件】 ---------- */
                    table.on('toolbar(selectProInfo)',function (obj) {
                        switch(obj.event){
                            case 'del':
                                //升序排列
                                trIndexList = trIndexList.sort();
                                if(null != trIndexList && 0 < trIndexList.length){
                                    layer.confirm('是否要删除该商品信息?', function (index) {
                                        //循环遍历选中的行下标
                                        for(var i = 0,len = trIndexList.length;i < len;i++){
                                            //删除选中的数据行
                                            chooseBreakInfoList.splice(trIndexList[i],1);
                                            //判断选中的行数大于一条且不是最后一条时，改变后一条的位置的值
                                            if(1 < trIndexList.length && i != trIndexList.length -1){
                                                //后一条前移(i+1)位
                                                trIndexList[i + 1] = trIndexList[i + 1] - 1 - i;
                                            }
                                        }
                                        //重载数据表格
                                        table.reload('selectProInfo', {
                                            data: chooseBreakInfoList
                                        });
                                        //清空保存下标位置的数组
                                        trIndexList = [];
                                        //关闭弹窗
                                        layer.close(index);
                                    });
								}else {
                                    layer.msg('没有选择待删除的数据！',{time:1500,shift:6});
								}
                                break;
                            case 'confirm':
                                if(null != chooseBreakInfoList && 0!=chooseBreakInfoList.length){
                                    //获取从所选商品数据表格中获取添加的商品信息并保存
                                    var proInfos = JSON.parse(JSON.stringify(chooseBreakInfoList));
                                    // 声明一个变量判断是否符合选择添加的条件
                                    var isFla = true;
                                    //循环判断
                                    for(var i=0,len=proInfos.length;i<len;i++){
                                        isFla = true;
                                        for(var j=0,lens=parent.chooseBreakInfoLists.length;j<lens;j++){
                                            var proInfo = parent.chooseBreakInfoLists[j];
                                            //数组中有批号、编号相同的商品则修改（单价、数量）
                                            if(proInfo.inveDescBatchNum === proInfos[i].inveDescBatchNum
                                                && proInfo.proId === proInfos[i].proId){
                                                //修改数量
                                                proInfo.proNum = +proInfo.proNum + +proInfos[i].proNum;
                                                //更改进价总额
                                                proInfo.inveDescTotalPrice = proInfo.proNum * proInfo.inveDescPrice;
                                                //更改售价总金额
                                                proInfo.invePresetTotalPrice = proInfo.proNum * proInfo.invePresetPrice;
                                                //更改判断条件
                                                isFla = false;
                                                //退出循环
                                                break;
                                            }
                                        }
                                        //数组中没有批号、编号相同的商品则添加
                                        if ( isFla ) {
                                            //加入到全局总列表中
                                            parent.chooseBreakInfoLists.push(proInfos[i]);
                                        }
                                    }

                                    //关闭弹窗
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                }else{
                                    layer.msg('没有选择的商品信息！！！',{time:1500,shift:6});
                                }
                                break;
                        }
                    });

                    /* ---------- 编辑商品的操作弹窗 ---------- */
                    function editProduct(data) {
                        //格式化生产日期和有效期
                        data.inveDescStartDate = getFormatDate(data.inveDescStartDate);
                        data.inveDescValidityDate = getFormatDate(data.inveDescValidityDate);

                        //声明全局的变量以供子窗体使用
                        window.table = tableList[3];

                        var comaddstate = $('#comaddstate').val();

                        indexList[0] = layer.open({
                            title: '商品信息(商品'+ comaddstate +')',
                            type: 2,
                            shade: 0.2,
                            maxmin:true,
                            shadeClose: true,
                            area: ['75%', '93%'],
                            content: 'inventeditProduct.html',
                            success: function (layero) {
                                window.breakageProdata = JSON.stringify(data);
                                var state = $(layero).find('iframe').contents().find('#proInvType');
                                state.val(comaddstate);
                            }
                        });
                    }

                    /* ---------- 商品清单（编辑商品信息） ---------- */
                    table.on('rowDouble(proBill)', function(obj){
                        var data = obj.data;//JSON.stringify(data)
                        // 区分编辑后刷新的表格
                        window.editProductFlag = undefined;

                        //调用编辑商品的弹窗方法
                        editProduct(data);
                    });

                    /* ---------- 商品列表（编辑商品信息） ---------- */
                    table.on('rowDouble(proListInfo)', function(obj){
                        var data = obj.data;//JSON.stringify(data)

                        // 区分编辑后刷新的表格
                        window.editProductFlag = undefined;

                        //调用编辑商品的弹窗方法
                        editProduct(data);
                    });

                    /* ---------- 所选商品（编辑商品信息） ---------- */
                    table.on('rowDouble(selectProInfo)', function(obj){
                        var data = obj.data;//JSON.stringify(data)

                        // 区分编辑后刷新的表格
                        window.editProductFlag = false;

                        //调用编辑商品的弹窗方法
                        editProduct(data);
                    });

                    /* ---------- 日期格式的函数 ---------- */
                    function getFormatDate(obj) {
                        var date = new Date(obj);

                        var year = date.getFullYear();
                        var month = date.getMonth()+1;
                        var day = date.getDate();

                        month = month<10 ? "0"+month : month;
                        day = day<10 ? "0"+day : day;

                        return year + "-" + month + "-" + day;
                    }
                });
            });
		</script>
	</body>
</html>
